<template>
  <div class="h-100 w-100 text-light-blue">
    <el-card class="box-card h-100 w-90">
      <div slot="header" class="clearfix">
        <el-radio-group v-model="tabIndex" @change="tabChange">
          <el-radio-button label="县级外业人员"></el-radio-button>
          <el-radio-button v-show="isShow" label="省级外业人员"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="container py-0">
        <div class="row text-muted my-4" v-for="(item, index) in datas" :key="index">
          <div class="w-10">
            <span class="font-weight-bold">{{item.name}}</span>
          </div>
          <div class="col-sm pt-1">
            <el-progress
              :text-inside="true"
              :stroke-width="18"
              :percentage="getPercentage(item.onlineOutdoorUserCount, item.outdoorUserCount)"
              status="success"
            ></el-progress>
          </div>
          <div style="width: 130px;" class="text-right">
            <span class="font-weight-bold">
              <span class="text-success">{{item.onlineOutdoorUserCount}}</span>
              /{{item.outdoorUserCount}}
            </span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "proofprogress",
  title: "各地市举证进度",
  data() {
    return {
      datas: [],
      tabIndex: "县级外业人员",
      isShow: true
    };
  },
  props: {
    busData: {
      type: Object,
      default: {}
    }
  },
  watch: {
    busData: {
      handler(val) {
        this.getData();
      },
      deep: true
    }
  },
  mounted() {
    if (this.$store.getters.userType != 1) {
      this.isShow = false;
    }
  },
  methods: {
    tabChange() {
      if (this.tabIndex == "县级外业人员") {
        this.busData.selectType = 1;
      } else {
        this.busData.selectType = 2;
      }
      this.$emit("sendObj", this.busData);
    },
    getPercentage(sch, total) {
      let result = total ? parseInt((sch / total) * 100) : 0;
      return result || 0;
    },
    getData() {
      let surl = this.$api.outdoorUserStatistical;
      let provinceId = "";
      let cityId = "";
      let appType = this.busData.selectType;
      if (this.busData.isProvince) {
        provinceId = "610000";
        cityId = "";
      } else {
        cityId = this.busData.regionId;
      }
      this.$get(surl, {
        provinceId: provinceId,
        cityId: cityId,
        appType: appType
      })
        .then(res => {
          if (res.data.code === "200") {
            this.datas = res.data.data;
          } else {
            this.$codeError(res);
          }
        })
        .catch(error => {
          this.$catchError(error);
        });
    }
  }
};
</script>
<style lang = 'scss'>
</style>